<template>
    <div>
        <a-modal
            :title="$route.meta.title"
            :visible="visible"
            :confirm-loading="loading"
            ok-text="保存"
            :width="900"
            @ok="ok"
            @cancel="cancel"
        >
            <div class="about-master-container">
                <a-form-model
                    ref="form"
                    :model="queryParam"
                    :rules="rules"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                >
                    <a-row :gutter="24">
                        <a-col :md="12" :sm="12">
                            <a-form-model-item :label="$route.meta.title" prop="name">
                                <BaseInput v-model="queryParam.name" placeholder="请输入" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="12" :sm="12">
                            <a-form-model-item label="状态" prop="enabled">
                                <a-select v-model="queryParam.enabled">
                                    <a-select-option :value="1">可用</a-select-option>
                                    <a-select-option :value="0">不可用</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { add, update, detail } from '@/api/technical/config'

export default {
    name: 'a' + Date.now(),
    props: {
        visible: {
            type: Boolean,
            required: true
        },
        form: {
            type: Object,
            default: () => null
        },
        typeId: {
            type: [String, Number],
            default: null
        }
    },
    data() {
        return {
            loading: false,
            queryParam: { enabled: 1 },
            rules: {
                name: [{ required: true, message: '请输入', trigger: 'blur' }],
                enabled: [{ required: true, message: '请选择', trigger: 'blur' }]
            }
        }
    },
    watch: {
        visible(e) {
            if (e) {
                this.queryParam = this.form
                try {
                    setTimeout(() => {
                        const requireDom = document.querySelectorAll('.ant-form-item-required')
                        requireDom.forEach((item) => {
                            item.parentNode.nextSibling.children[0].children[0].classList.add('requiredFormItem') // 找到'.ant-form-item-children'元素添加样式
                        })
                    }, 0)
                } catch {}
            } else {
                this.queryParam = {}
                this.$refs.form.clearValidate()
            }
        }
    },
    methods: {
        async ok() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.loading = true
                    let res
                    let params = this.$clone(this.queryParam)
                    params.type = this.typeId
                    params.enabled = params.enabled === 1
                    if (this.queryParam.id) {
                        res = await update(params)
                    } else {
                        res = await add(params)
                    }
                    this.loading = false
                    this.$noticeSuccess('保存成功')
                    this.$emit('ok', params)
                    this.cancel()
                }
            })
        },
        cancel() {
            this.$emit('update:visible', false)
        }
    }
}
</script>

<style lang="less" scoped>
</style>
